<template>
    <div id="Statistical_Into">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>小说推广</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="title" placeholder="请输入小说名称"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="author" placeholder="请输入作者名称"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.isrecommend" placeholder="是否推荐" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.ishow" placeholder="是否App展示" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.issex" placeholder="请选择男频/女频" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="男频" value="1"></el-option>
                        <el-option label="女频" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="下架" value="0"></el-option>
                        <el-option label="上架" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                    <!--                    <el-button type="primary" size="small" @click="addRecharge">添加小说</el-button>-->
                </el-form-item>
            </el-form>
            <el-table
                    size="small"
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="coverpic"
                        label="封面"
                        width="122">
                    <template slot-scope="scope">
                        <img :src="scope.row.coverpic" width="30" height="30" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="书名">
                </el-table-column>
                <el-table-column
                        prop="tag"
                        label="类型">
                </el-table-column>
                <el-table-column
                        prop="author"
                        label="作者">
                </el-table-column>
                <el-table-column
                        prop="issex"
                        label="频道">
                    <template slot-scope="scope">
                        <span v-if="scope.row.issex==1">男频</span>
                        <span v-if="scope.row.issex==2">女频</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="generalize_count"
                        label="推广次数">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作"
                        width="400">
                    <template slot-scope="scope">
                        <p style="text-align: center">
                            <el-dropdown style="margin: 0 10px" trigger="click" @command="handleCommand1">
                                <el-button type="primary" size="small"
                                           @click.native="getChapters(scope.row.id,scope.row.title)">文字文案<i
                                        class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown" style="width: 200px">
                                    <el-dropdown-item v-for="(item,index) in chapters" :key="index" :command="item.id">
                                        {{item.title}}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-dropdown style="margin: 0 10px" trigger="click" @command="handleCommand2">
                                <el-button type="primary" size="small"
                                           @click.native="getChapters(scope.row.id,scope.row.title)">图片文案<i
                                        class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown" style="width: 200px">
                                    <el-dropdown-item v-for="(item,index) in chapters" :key="index" :command="item.id">
                                        {{item.title}}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-button type="success" plain size="small" @click="add(scope.row.id,scope.row.title)">
                                生成推广链接
                            </el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :total="params.totals"
                        :layout="this.$store.state.paginationLayout">
                </el-pagination>
            </div>
        </el-card>
        <!--            新增或编辑-->
        <el-dialog title="新增" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :model="dataForm" :label-width="this.$store.state.setLabelWidth" size="small">
                        <el-form-item label="小说名称">
                            <el-input v-model="dataForm.title" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="推广名称">
                            <el-input v-model="dataForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="小说章节">
                            <el-select v-model="dataForm.chaps" placeholder="选择章节" style="width: 100%">
                                <el-option :label="item.title" :value="item.id" v-for="(item,index) in chapters"
                                           :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="强制关注章节">
                            <el-input v-model="dataForm.subchaps"></el-input>
                            <span class="input_hint">强制关注章节数不能大于最大免费章节数,留空或者填0则默认不强制关注，推荐强关章节第7章，建议强制关注章节为第5章~第8章</span>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="dataForm.msg"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>

  export default {
    name: "Statistical_Into",
    data() {
      return {
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0,
        },
        tableData: [],
        fromTitle: '',
        visible: false,
        btype: 2,
        chapters: [],
        title: '',
        author: '',
        searchForm: {
          isrecommend: '',
          status: '',
          ishow: '',
          issex: '',
        },
        dataForm: {
          anid: '',
          btype: 2,
          chaps: '',
          name: '',
          subchaps: '',
          msg: '',
          title: '',
        },
        anime_id: '',
        anime_title: '',
      }
    },
    created() {
      this.getList();
    },
    watch: {
      title(e) {
        this.getList()
      },
      author(e) {
        this.getList()
      },
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
          title: this.title,
          author: this.author,
          isrecommend: this.searchForm.isrecommend,
          status: this.searchForm.status,
          ishow: this.searchForm.ishow,
          issex: this.searchForm.issex
        };
        this.$axios.post("admin/generalize/anime", data).then((res) => {
          console.log(res.data);
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
          // console.log(this.tableData);
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList();
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList();
      },
      add(id, title) {
        this.visible = true;
        this.dataForm.anid = id;
        this.dataForm.title = title;
        this.dataForm.chaps = '';
        this.chapters = [];
        this.getChapters(this.dataForm.anid);
      },
      edit(id) {
        // this.id = id;
        // this.bookId = id;
        // this.visible = true;
      },
      remove(id) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.del('admin/novel/' + id, '').then((res) => {
            this.$message.success('删除成功!');
            this.getList();
          });
        }).catch(() => {

        });
      },
      dialogAffirm() {
        this.$axios.post("admin/generalize", this.dataForm).then((res) => {
          this.$message.success('添加成功');
          this.visible = false;
        });
      },
      getChapters(id, title) {
        this.chapters = [];
        this.anime_id = id;
        this.anime_title = title;
        let data = {
          anid: id,
          page: '1',
          page_size: '10',
        };
        this.$axios.post("admin/chapter/index", data).then((res) => {
          this.chapters = res.data.list;
        });
      },
      search() {
        this.params.pagenum = 1;
        this.getList();
      },
      closeDatails(data) {
        this.visible = data;
        this.getList();
      },
      handleCommand1(chapsId) {
        let routeData = this.$router.resolve({
          path: "text_extension",
          query: {
            anime_id: this.anime_id,
            anime_title:this.anime_title,
            chaps: chapsId,
          }
        });
        window.open(routeData.href, '_blank');
      },
      handleCommand2(chapsId) {
        let routeData = this.$router.resolve({
          path: "img_extension",
          query: {
            anime_id: this.anime_id,
            anime_title:this.anime_title,
            chaps: chapsId,
          }
        });
        window.open(routeData.href, '_blank');
      },
      handleCommand3(chapsId){
        let routeData = this.$router.resolve({
          path: "bg_extension",
          query: {
            anime_id: this.anime_id,
            anime_title:this.anime_title,
            chaps: chapsId,
          }
        });
        window.open(routeData.href, '_blank');
      }
    }
  }
</script>

<style scoped>

</style>